<template>
<div class=''>
    <!--备件台账列表-->
    <el-row>
        <el-col :span="24">
            <div class="grid-content bg-purple-dark">
                <!--模糊查及操作-->
                <el-button style="width: 70px" type="success" @click="addToVue">新增</el-button>
                <el-button style="width: 70px;margin-left: 10px" @click="upperToVue">编辑</el-button>
                <el-button style="width: 70px;margin-left: 10px" @click="deleteBatch">删除</el-button>
                <div style="margin-left: 1220px;margin-top: -30px">
                    <el-input v-model="codeName" placeholder="请输入备件编号或备件名称" style="width: 230px">
                        <i slot="append" class="el-input__icon el-icon-search" style="height: 20px;line-height: 20px;width: 10px" @click="selByFrom"></i>
                    </el-input>
                    <i class="el-icon-menu" style="margin-left: 3px;margin-top: 3px;height: 30px;width: 30px;color: #C7CDD9" @click="showSpare = true"></i>
                </div>
                <!--表格-->
                <el-table
                        :data="LedgerList"
                        @selection-change="LedgerListSelection"
                        border
                        style="width: 88.2%;margin-top: 10px">
                    <el-table-column
                            type="selection"
                            width="55">
                    </el-table-column>
                    <el-table-column
                            fixed
                            align="center"
                            prop="spId"
                            label="序号"
                            width="55">
                    </el-table-column>
                    <el-table-column
                            align="center"
                            prop="spCode"
                            label="备件编码"
                            width="200">
                    </el-table-column>
                    <el-table-column
                            align="center"
                            prop="spName"
                            label="备件名称"
                            width="90">
                    </el-table-column>
                    <el-table-column
                            align="center"
                            prop="spSpecification"
                            label="规格型号"
                            width="90">
                    </el-table-column>
                    <el-table-column
                            align="center"
                            prop="spTypeName"
                            label="备件类型"
                            width="90">
                    </el-table-column>
                    <el-table-column
                            align="center"
                            prop="saUnit"
                            label="单位"
                            width="90">
                    </el-table-column>
                    <el-table-column
                            align="center"
                            prop="upperInventory"
                            label="库存上限"
                            width="90">
                    </el-table-column>
                    <el-table-column
                            align="center"
                            prop="lowerInventory"
                            label="库存下限"
                            width="90">
                    </el-table-column>
                    <el-table-column
                            align="center"
                            prop="totalInventory"
                            label="总库存"
                            width="90">
                    </el-table-column>
                    <el-table-column
                            align="center"
                            prop="amountInventory"
                            label="库存金额"
                            width="90">
                    </el-table-column>
                    <el-table-column
                            align="center"
                            prop="replaceCycle"
                            label="更换周期"
                            width="90">
                    </el-table-column>
                    <el-table-column
                            align="center"
                            prop="factureName"
                            label="生产厂商"
                            width="90">
                    </el-table-column>
                    <el-table-column
                            align="center"
                            prop="operator"
                            label="操作人"
                            width="90">
                    </el-table-column>
                    <el-table-column
                            align="center"
                            prop="updateTime"
                            label="操作时间"
                            width="180">
                    </el-table-column>
                </el-table>
                <!--分页-->
                <el-pagination
                        :current-page.sync="spareLedger.page"
                        :page-size="spareLedger.pagesize"
                        :page-sizes="[10, 20, 30, 40]"
                        :total="total"
                        background
                        layout="total, sizes ,prev, pager, next, jumper"
                        style="padding: 30px 0; text-align: center"
                        @current-change="selAllSpareLedger"
                        @size-change="handleSizeChanges"
                />
                <!--弹出层模糊查信息-->
                <div v-if="showSpare" style="width: 700px;height: 270px;background: white;position: fixed;left: 985px;top:124px;z-index: 900;border: 1px solid #F4F4F4;border-radius: 4px">
                    <el-form ref="form" :model="spareLedger" label-width="100px">
                        <el-form-item label="备件编号" style="margin-top: 20px">
                            <el-input v-model="spareLedger.spCode" style="width: 180px"></el-input>
                        </el-form-item>
                        <el-form-item label="备件名称">
                            <el-input v-model="spareLedger.spName" style="width: 180px"></el-input>
                        </el-form-item>
                        <el-form-item label="规格型号">
                            <el-input v-model="spareLedger.spSpecification" style="width: 180px"></el-input>
                        </el-form-item>
                        <el-form-item label="备件类型">
                            <el-cascader
                                    v-model="spareLedger.spTypeId"
                                    :options="options"
                                    :props="props"
                                    @change="handleChange"
                                    clearable
                                    expand-trigger="hover"
                                    placeholder="请选择"
                            ></el-cascader>
                        </el-form-item>
                        <div style="margin-left: 320px;position: relative;top: -190px">
                            <el-form-item label="生产厂商">
                                <el-input v-model="spareLedger.factureName" style="width: 180px;"></el-input>
                            </el-form-item>
                            <el-form-item label="总库存">
                                <el-input-number v-model="spareLedger.totalInventory" style="width: 180px"></el-input-number>
                            </el-form-item>
                            <el-form-item label="操作人">
                                <el-select v-model="spareLedger.operator" placeholder="请选择操作人">
                                    <el-option v-for="operator in peopleData" :key="operator.peopleManagementId" :label="operator.peopleManagementName" :value="operator.peopleManagementName"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="操作时间">
                                <el-date-picker type="datetime" v-model="spareLedger.updateTime"></el-date-picker>
                            </el-form-item>
                        </div>
                    </el-form>
                    <div style="width: 100%;height: 50px;border-top: 1px solid #F4F4F4;margin-top: -170px">
                        <el-button @click="showSpare =  false">关闭</el-button>
                        <el-button @click="empty()" style="margin-top: 10px;margin-left: 20px">清空</el-button>
                        <div style="margin-left: 590px;margin-top: -28px">
                            <el-button type="success" @click="selBySpare">查询</el-button>
                        </div>
                    </div>
                </div>
            </div>
        </el-col>
    </el-row>
</div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
//import引入的组件需要注入到对象中才能使用
components: {},
data() {
//这里存放数据
return {
    showSpare:false,
    //模糊查数据
    codeName:'',
    spareLedger:{
        codeName:null,
        spCode:null,
        spName:null,
        spSpecification:null,
        spTypeId:null,
        factureName:null,
        totalInventory:null,
        operator:null,
        updateTime:null,
        page:1,
        pageSize:10
    },
    //分页数据
    total:0,
    //全查数据
    LedgerList:[],
    //备件类型树形数据
    options:[],
    props: {
        value: 'spId',
        label: 'spTypename',
        children: 'children'
    },
    //人员数据
    peopleData:[],
    selection:[],
};
},
//监听属性 类似于data概念
computed: {},
//监控data中的数据变化
watch: {},
//方法集合
methods: {
    caigou(){
        alert(11)
    },
    guihuan(){
        alert(22)
    },
    deleteBatch(){
        if (this.selection.length == 0){
            this.$message({
                message: '您还没有选择数据',
                type: 'warning'
            });
        }else {
            let spIds = []
            for (let i = 0; i < this.selection.length; i++) {
                spIds.push(this.selection[i].spId)
            }
            this.request.post("/spare/spare-ledger/deleteBatch",spIds)
            .then(res=>{
                this.$message({
                    message: '删除成功',
                    type: 'success'
                });
                this.selAllSpareLedger()
            })
        }
    },
    upperToVue(){
      if (this.selection.length>1){
          this.$message.error('只能选择一条数据进行修改');
      }
      else if (this.selection.length == 0){
          this.$message({
              message: '您还没有选择数据',
              type: 'warning'
          });
      }else {
          let id = this.selection[0].spId
          this.$router.push({ path: '/spareAdd', query: { id: id }})
      }
    },
    LedgerListSelection(val){
        console.log(val)
        this.selection = val
    },
    selByFrom(){
      this.selAllSpareLedger()
    },
    addToVue(){
        this.$router.push('/spareAdd')
    },
    //查询人员数据
    selAllPeople(){
        this.request.get("/system/people-management/selAllPeople")
        .then(res=>{
            this.peopleData = res.data
        })
    },

    //备件类型树形查询
    selAllSpareType(){
        this.request.get("/spare/spare-types/selAllSpareType")
        .then(res=>{
            this.options = res.data
        })
    },

    //模糊查按钮
    selBySpare(){
        this.selAllSpareLedger()
    },

    //分页模糊查备件台账列表
    selAllSpareLedger(){
        if(this.codeName == ''){
            this.spareLedger.codeName = null
            this.request.post("/spare/spare-ledger/selAllSpareLedger",this.spareLedger)
            .then(res=>{
                this.LedgerList = res.data.items
                this.total = res.data.counts
            })
        }else {
            this.spareLedger.codeName = this.codeName
            this.request.post("/spare/spare-ledger/selAllSpareLedger",this.spareLedger)
            .then(res=>{
                console.log(res)
                this.LedgerList = res.data.items
                this.total = res.data.counts
            })
        }
    },
    //清空按钮
    empty(){
        this.spareLedger.spCode = ''
        this.spareLedger.spName = ''
        this.spareLedger.spSpecification = ''
        this.spareLedger.spTypeId = 0
        this.spareLedger.factureName = ''
        this.spareLedger.totalInventory = null
        this.spareLedger.operator = ''
        this.spareLedger.updateTime = null
    },
    //分页跳转数据
    handleSizeChanges(pageSize) {
        this.spareLedger.pagesize = pageSize;
        this.selAllSpareLedger();
    },

    handleChange(value) {
        console.log(value)
    }

},
//生命周期 - 创建完成（可以访问当前this实例）
created() {
    //全查
    this.selAllSpareLedger()
    //树形查询备件类型
    this.selAllSpareType()
    //查询人员数据
    this.selAllPeople()

},
//生命周期 - 挂载完成（可以访问DOM元素）
mounted() {

},
beforeCreate() {}, //生命周期 - 创建之前
beforeMount() {}, //生命周期 - 挂载之前
beforeUpdate() {}, //生命周期 - 更新之前
updated() {}, //生命周期 - 更新之后
beforeDestroy() {}, //生命周期 - 销毁之前
destroyed() {}, //生命周期 - 销毁完成
activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style scoped>
</style>
